<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="https://v3.bootcss.com/favicon.ico">

  <title>Narrow Jumbotron Template for Bootstrap</title>

  <link href="/public/lib/css/bootstrap.min.css" rel="stylesheet">
  <link href="/public/lib/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  <link href="/public/lib/css/jumbotron-narrow.css" rel="stylesheet">
  <script src="/public/lib/js/ie-emulation-modes-warning.js"></script>

  <script src="/public/lib/js/vue.js"></script>
  <script src="/public/lib/js/vue-resource.min.js"></script>
  <script src="/public/lib/js/vue-router.js"></script>
  <link rel="stylesheet" href="/public/css/index.css">
</head>

<body>

  <div class="container" id="app">
    <div class="header clearfix">
      <nav>
        <ul class="nav nav-pills pull-right">
          <li v-show="welcome"><a href="javascript:void">当前登录用户：{{username}}</a></li>
          <li v-show="welcome"><a href="/logout">注销</a></li>
          <li v-show="loginBtn"><a href="/logreg">登录</a></li>
          <li v-show="loginBtn"><a href="/logreg#register">注册</a></li>
        </ul>
      </nav>
      <h3 class="text-muted">李子杰的博客</h3>
    </div>

    <div class="jumbotron">
      <h2 v-show="welcome">欢迎你，{{username}}</h2>
      <h2 v-show="loginBtn">欢迎，请登录</h2>
      <p class="lead">欢迎来到我的博客。这是一个用Bootstrap模板构建页面，综合运用Vue、NodeJS、MongoDB等技术进行开发的简单项目</p>
      <p>
        <a v-show="loginBtn" class="btn btn-lg btn-success" href="/logreg" role="button">
          登录
        </a>
        <a v-show="welcome" class="btn btn-lg btn-success" href="/topic">留言</a>
      </p>
    </div>

    <div class="row marketing">
      <div v-for="item in topicList" class="list-group">
        <div class="list-group-item topicHead">
          <h4 class="list-group-item-heading">
            {{ item.title }}
            <a v-show="item.delBtn" @click.prevent="delTopic(item._id)" class="btn delBtn pull-right" href="">删除</a>
            <span class="small topicTime">{{ item.datetime }}</span>
          </h4>
        </div>
        <div class="list-group-item">
          <span class="small topicUser-xs visible-xs">{{ item.username }}:</span>
          <span class="small topicUser hidden-xs">作者：{{ item.username }}</span>
          <p class="list-group-item-text text-success topicMsg hidden-xs">
            {{ item.msg }}
          </p>
          <p class="list-group-item-text text-success topicMsg-xs visible-xs">
            {{ item.msg }}
          </p>
        </div>
      </div>

    </div>

    <footer class="footer">
      <p>© 2020 Company, Inc.</p>
    </footer>

  </div>


  <script src="/public/js/index.js"></script>

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="/public/lib/js/ie10-viewport-bug-workaround.js"></script>

</body>

</html>